<template>
  <div class="eg-page page-scroll-view">
    <page-header title="MT Mobile Vue" subTitle="每天健康Vue移动端组件库"></page-header>

    <div class="eg-bd">
      <eg-category-item v-for="(item, key) in coms" :title="item.title" :links="item.links" :key="key"></eg-category-item>
    </div>
  </div>
</template>

<script>
import CategoryItem from './p-category-item'
import PageHeader from './p-page-header'

export default {
  name: 'demos-main',
  data () {
    return {
      coms: [
        {
          title: '布局 Layout',
          links: [
            {title: 'Flex 布局', path: 'flex'},
            {title: 'WhiteSpace 上下留白', path: 'white-space'},
            {title: 'WingBlank 两翼留白', path: 'wing-blank'},
          ]
        },
        {
          title: '导航 Navigation',
          links: [
            {title: 'Header 页头', path: 'header'},
            {title: 'Meau 菜单', path: 'meau'},
            {title: 'NavBar 导航栏', path: 'navbar'},
            {title: 'Tabs 标签栏', path: 'tabs'},
          ]
        },
        {
          title: '主题 Theme',
          links: [
            {title: '定制主题', path: 'theme'},
          ]
        },
        {
          title: '操作反馈 Feedback',
          links: [
            {title: 'Meau 菜单', path: 'meau'},
            {title: 'NavBar 导航栏', path: 'navbar'},
            {title: 'Tabs 标签栏', path: '/tabs'},
            {title: 'Header 页头', path: '/header'},
          ]
        },
        {
          title: '数据录入 Data Entry',
          links: [
            {title: 'Meau 菜单', path: '/meau'},
            {title: 'NavBar 导航栏', path: '/navbar'},
            {title: 'Tabs 标签栏', path: '/tabs'},
            {title: 'Header 页头', path: '/header'},
          ]
        },
        {
          title: '数据展示 Data Display',
          links: [
            {title: 'Meau 菜单', path: '/meau'},
            {title: 'NavBar 导航栏', path: '/navbar'},
            {title: 'Tabs 标签栏', path: '/tabs'},
            {title: 'Header 页头', path: '/header'},
          ]
        },
        {
          title: '其它 Other',
          links: [
            {title: 'Meau 菜单', path: '/meau'},
            {title: 'NavBar 导航栏', path: '/navbar'},
            {title: 'Tabs 标签栏', path: '/tabs'},
            {title: 'Header 页头', path: '/header'},
          ]
        },
      ]
    }
  },
  components: {
    'eg-category-item': CategoryItem,
    'page-header': PageHeader,
  }
}
</script>
